<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>百度前端学院html任务四--定位和居中</title>
	<style type="text/css">
	body{margin:0;padding: 0;}
	.main{width:500px;height:300px;position:absolute;border:1px solid black;overflow:hidden;margin:auto;top:0;bottom:0;left:0;right:0;}
	.top{width:100px;height:100px;border-radius: 50%;background: yellow;position: relative;float:left;margin-top:-50px;margin-left:-50px;}
	.bom{width:100px;height:100px;border-radius: 50%;background: yellow;position: relative;margin-top:200px ;margin-left:450px;float: left;}
	</style>
</head>
<body>
	<div class="main">
		<div class="top"></div>
		<div class="bom"></div>
	</div>
</body>
</html>